<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/nav.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/iconFont/iconfont.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/seller/render.css"/>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table .cell.el-tooltip {
            white-space: inherit !important;
        }

        body, button, input, select, textarea {
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', "Microsoft Yahei", \5b8b\4f53, sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .el-form-item__content {
            margin-left: 0px !important;
        }

        .el-table__empty-block {
            height: 0px !important;
        }
    </style>
</head>
<body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/static/js/frame/totoro-utils.js"></script>
<script src="/static/js/frame/jquery-3.5.1.min.js"></script>

<jsp:include page="/public_page/nav.jsp"></jsp:include>
<div id="app" style="margin-top: 50px;">
<div id="page">
    <div id="mytaobao-panel" class="layout grid-s140m0">
        <div class="col-main">
            <div id="J_Region" class="main-wrap">
                <div id="root">
                    <div data-reactroot="" class="engine-app" id="_root">
                        <div class="com-struct page-root-struct" id="root">
                            <div class="next-loading ol-next-loading block list-page-loading">
                                <div class="next-loading-component">
                                    <div class="com-struct page-ceiling-struct" id="ceiling-struct">
                                        <div class="manage-card manage-card block">
                                            <div class="manage-card-head"><p class="manage-card-title"><i
                                                    class="next-icon next-icon-edit next-icon-medium manage-card-icon"></i><span
                                                    class="manage-card-title-content">官方公告</span></p></div>
                                            <div class="manage-card-content">
                                                <div class="manage-notice block"><i
                                                        class="next-icon next-icon-warning2 next-icon-medium manage-notice-icon"></i>
                                                    <div class="manage-notice-content">
                                                        <div class="sell-o-rich-text manage-notice-content-item">
                                                            1、不小心删除宝贝怎么办？选中删除宝贝，点击“恢复到仓库”按钮，宝贝将立刻恢复。宝贝链接、销量等所有宝贝信息都将和删除前一致。<a
                                                                href="//shangjiafuwu.bbs.taobao.com/detail.html?postId=1921774"
                                                                target="_blank">更多详情</a></div>
                                                        <div class="sell-o-rich-text manage-notice-content-item">
                                                            2、删除超过31天的宝贝此页面不再展示，请到 <a @click="filter.babyType = 1; resetFilter(); getDeleteProducts(false);">历史宝贝记录</a>
                                                            查看。成为历史宝贝后商品无法做编辑、恢复等操作，需要您重新发布。
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="manage-card manage-card block hide">
                                            <div class="manage-card-head"><p class="manage-card-title"><i
                                                    class="next-icon next-icon-edit next-icon-medium manage-card-icon"></i><span
                                                    class="manage-card-title-content">官方工具</span></p></div>
                                            <div class="manage-card-content">
                                                <div class="manage-link-list manage-link-list block hide"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="next-tabs next-tabs-wrapped next-tabs-medium next-tabs-top manage-container-tab list-page-tab">
                                        <div role="tablist" class="next-tabs-bar" tabindex="0">
                                            <div class="next-tabs-nav-container">
                                                <div class="next-tabs-nav-wrap">
                                                    <div class="next-tabs-nav-scroll">
                                                        <div class="next-tabs-nav"
                                                             style="transform: translate3d(0px, 0px, 0px);">
                                                            <div role="tab" aria-disabled="false" aria-selected="true" style="border-left: 1px solid #DCDEE3 !important;"
                                                                 :class="(filter.babyType == 0?'active next-tabs-tab next-tabs-nav-appear next-tabs-nav-appear-active':'next-tabs-tab next-tabs-nav-appear next-tabs-nav-appear-active')"
                                                                 @click="filter.babyType = 0; resetFilter(); getDeleteProducts(false);">
                                                                <div class="next-tabs-tab-inner">商品回收站</div>
                                                            </div>
                                                            <div role="tab" aria-disabled="false" aria-selected="true"
                                                                 :class="(filter.babyType == 1?'active next-tabs-tab next-tabs-nav-appear next-tabs-nav-appear-active':'next-tabs-tab next-tabs-nav-appear next-tabs-nav-appear-active')"
                                                            @click="filter.babyType = 1; resetFilter(); getDeleteProducts(false);">
                                                                <div class="next-tabs-tab-inner">历史宝贝</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="next-tabs-content">
                                            <div role="tabpanel" aria-hidden="false"
                                                 class="next-tabs-tabpane active"></div><!-- react-empty: 57 --></div>
                                    </div>
                                    <div class="manage-container-filter  "
                                         data-spm-anchor-id="a2oq0.12575281.0.i2.2a691deba6fsql">
                                        <div class="manage-catlist filter-catlist-container">
                                            <div class="sell-o-cat-list " style="display: flex; flex-flow: row wrap;">
                                                <div class="sell-item-box" v-if="filter.babyType==0">
                                                    <span>商品标题：</span>
                                                    <el-input v-model="filter.productTitle" placeholder="" size="small" style="width: 150px;"></el-input>
                                                </div>

                                                <div class="sell-item-box" style="margin-left: 250px;">
                                                    <span v-if="filter.babyType == 0">删除时间：</span>
                                                    <span v-if="filter.babyType == 1">创建时间：</span>
                                                    <el-date-picker
                                                            size="small"
                                                            v-model="filter.productPublicTime"
                                                            type="daterange"
                                                            align="right"
                                                            unlink-panels
                                                            range-separator="至"
                                                            start-placeholder="开始日期"
                                                            end-placeholder="结束日期"
                                                            :picker-options="pickerOptions"
                                                            value-format="yyyy-MM-dd HH:mm:ss">>
                                                    </el-date-picker>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="filter-footer">
                                            <button type="button"
                                                    class="next-btn next-btn-normal next-btn-medium filter-footer-btn"
                                                    data-spm-anchor-id="a2oq0.12575281.0.i0.2a691deba6fsql"
                                            @click="getDeleteProducts(false)">
                                                <!-- react-text: 91 -->查询<!-- /react-text --></button>
                                            <button type="button"
                                                    class="next-btn next-btn-normal next-btn-medium filter-footer-btn"
                                            @click="resetFilter(); getDeleteProducts(false);">
                                                <!-- react-text: 93 -->重置<!-- /react-text --></button>
                                        </div>
                                    </div><!-- react-empty: 94 -->
                                    <div style="">
                                        <div class="next-affix-top mc-affix-container" style="">
                                            <div class="com-struct list-page-action-toolbar" id="action-struct"
                                                 data-spm-anchor-id="a2oq0.12575281.0.i7.2a691deba6fsql">
                                                <div class="sell-o-action list-page-operator">
                                                    <button id="operator" name="batchRecoverItemBtn" type="button" v-if="filter.babyType == 0"
                                                            class="next-btn next-btn-default next-btn-normal next-btn-medium action-item"
                                                            data-spm-anchor-id="a2oq0.12575281.0.i8.2a691deba6fsql"
                                                    @click="recoverDialogVisible = true">
                                                        <!-- react-text: 100 -->恢复到仓库<!-- /react-text --></button>
                                                    <div class="action-total-item-wrap">
                                                        <button type="button"
                                                                class="next-btn next-btn-text next-btn-primary next-btn-medium action-total-item" style="background-color: unset">
                                                            <!-- react-text: 103 -->已选商品( {{productCheckedes.length}} )
                                                            <!-- /react-text --></button>
                                                    </div>
                                                </div>
                                                <div class="com-struct list-page-pagination-toolbar" id="pagination-toolbar">
                                                    <span>共{{filter.productAllPage}}件商品</span>
                                                    <el-pagination
                                                            :current-page="filter.productNowPage"
                                                            @current-change="changeNowPage"
                                                            :pager-count="5"
                                                            background
                                                            :page-size="5"
                                                            layout="prev, pager, next"
                                                            :total="filter.productAllPage">
                                                    </el-pagination>
                                                </div>
                                            </div>
                                        </div>
                                    </div><!-- react-empty: 120 -->
                                    <div class="next-table only-bottom-border zebra manage-o-table  sell-newtable-container "
                                         name="table" label="">
                                        <div class="next-table-inner">
                                            <template>
                                                <el-table v-if="filter.babyType==0"
                                                        v-loading="listLoading"
                                                        ref="multipleTable"
                                                        :data="deleteProductTable"
                                                        tooltip-effect="dark"
                                                        style="width: 100%"
                                                        @selection-change="changeProductChecked">
                                                    <el-table-column
                                                            type="selection"
                                                            width="55">
                                                    </el-table-column>
                                                    <el-table-column
                                                            label="商品名称"
                                                            width="300">
                                                        <template slot-scope="scope">
                                                            <a :href="'/buy.htm?pid='+scope.row.productId" target="_blank">
                                                                <img :src="scope.row.productImage" style="width: 80px; height: 80px; float: left;">
                                                            </a>
                                                            <div class="product-desc-hasImg">
                                                                <span class="product-desc-span">
                                                                <a :href="'/buy.htm?pid='+scope.row.productId" target="_blank">{{scope.row.productName}}</a>
                                                                </span>
                                                                <span class="product-desc-span" style="font-size: 12px; font-weight: normal; color: rgb(153, 153, 153);">ID:{{scope.row.productId}}</span>
                                                            </div>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                            prop="price"
                                                            label="价格"
                                                            sortable>
                                                        <template slot-scope="scope">
                                                            <div class="list-table-price-cell" style="color: rgb(208, 2, 27);">
                                                                <span class="product-desc-span">
                                                                    ¥ {{scope.row.price}}
                                                                </span>
                                                            </div>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                            prop="count"
                                                            label="库存"
                                                            sortable
                                                            show-overflow-tooltip>
                                                        <template slot-scope="scope">
                                                                <span class="product-desc-span">
                                                                    {{scope.row.count}}
                                                                </span>
                                                        </template>
                                                    </el-table-column>
                                                    </el-table-column>
                                                    <el-table-column
                                                            prop="deleteTime"
                                                            label="删除时间"
                                                            sortable
                                                            show-overflow-tooltip>
                                                        <template slot-scope="scope">
                                                            <span>{{scope.row.deleteTime}}</span>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                            label="操作"
                                                            show-overflow-tooltip>
                                                        <template slot-scope="scope">
                                                            <div class="sell-o-info">
                                                                <div class="info-content">
                                                                    <div class="sell-o-action  action-vertical">
                                                                        <el-link type="primary" style="color: #2192D9" @click="recover(scope.row)">恢复到仓库</el-link>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                                <el-table v-if="filter.babyType==1"
                                                        v-loading="listLoading"
                                                        ref="multipleTable"
                                                        :data="deleteProductTable"
                                                        tooltip-effect="dark"
                                                        style="width: 100%"
                                                        @selection-change="changeProductChecked">
                                                    <el-table-column
                                                            type="selection"
                                                            width="55">
                                                    </el-table-column>
                                                    <el-table-column
                                                            label="商品名称"
                                                            width="300">
                                                        <template slot-scope="scope">
                                                            <a :href="'/buy.htm?pid='+scope.row.productId" target="_blank">
                                                                <img :src="scope.row.productImage" style="width: 80px; height: 80px; float: left;">
                                                            </a>
                                                            <div class="product-desc-hasImg">
                                                                <span class="product-desc-span">
                                                                <a :href="'/buy.htm?pid='+scope.row.productId" target="_blank">{{scope.row.productName}}</a>
                                                                </span>
                                                                <span class="product-desc-span" style="font-size: 12px; font-weight: normal; color: rgb(153, 153, 153);">ID:{{scope.row.productId}}</span>
                                                            </div>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                            prop="price"
                                                            label="价格"
                                                    >
                                                        <template slot-scope="scope">
                                                            <div class="list-table-price-cell" style="color: rgb(208, 2, 27);">
                                                                <span class="product-desc-span">
                                                                    ¥ {{scope.row.price}}
                                                                </span>
                                                            </div>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                            prop="count"
                                                            label="库存"
                                                            show-overflow-tooltip>
                                                        <template slot-scope="scope">
                                                                <span class="product-desc-span">
                                                                    {{scope.row.count}}
                                                                </span>
                                                        </template>
                                                    </el-table-column>
                                                    </el-table-column>
                                                    <el-table-column
                                                            prop="createTime"
                                                            label="创建时间"
                                                            show-overflow-tooltip>
                                                        <template slot-scope="scope">
                                                            <span>{{scope.row.createTime}}</span>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                            prop="publishTime"
                                                            label="发布时间"
                                                            show-overflow-tooltip>
                                                        <template slot-scope="scope">
                                                            <span>{{scope.row.publishTime}}</span>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                            prop="completeTime"
                                                            label="结束时间"
                                                            show-overflow-tooltip>
                                                        <template slot-scope="scope">
                                                            <span>{{scope.row.completeTime}}</span>
                                                        </template>
                                                    </el-table-column>

                                                </el-table>
                                            </template>
                                            <!--编辑商品标题界面-->
                                            <el-dialog title="请选择恢复宝贝的理由" :visible.sync="recoverDialogVisible" :close-on-click-modal="false">
                                                <el-select v-model="reasonValue" placeholder="请选择" size="small" style="width: 300px;">
                                                    <el-option
                                                            v-for="item in reasons"
                                                            :key="item.reasonId"
                                                            :label="item.reasonText"
                                                            :value="item.reasonId">
                                                    </el-option>
                                                </el-select>
                                                </el-form>
                                                <div slot="footer" class="dialog-footer">
                                                    <el-button type="primary" :loading="dialogLoading" size="small" @click.native="submitRecover">提交</el-button>
                                                    <el-button @click.native="restoreDialogVisible = false" size="small">取消</el-button>
                                                </div>
                                            </el-dialog>
                                        </div>
                                    </div>
                                    <div class="next-pagination next-pagination-normal next-pagination-medium medium ol-next-pagination list-page-pagination"
                                         name="pagination" label="分页器" style="    float: right;">
                                        <el-pagination
                                                :current-page="filter.productNowPage"
                                                @current-change="changeNowPage"
                                                :pager-count="5"
                                                background
                                                :page-size="5"
                                                layout="prev, pager, next"
                                                :total="filter.productAllPage">
                                        </el-pagination>
                                    </div>
                                        <span id="bottom-advertising-tip" class="ol-text bottom-advertising-tip">以下是第三方广告推广，非阿里巴巴官方工具，请自行评估使用</span>
                                    <!-- react-empty: 176 --></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 左侧导航栏 -->
        <jsp:include page="seller_left_nav.jsp"></jsp:include>
    </div>
</div>
</div>
<jsp:include page="/public_page/open_chat.jsp"></jsp:include>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            // 时间快捷项
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            filter:{
                productTitle: '',
                productPublicTime: '',
                productPageSize: 5,
                productAllPage: 0,
                productNowPage: 1,
                babyType:0,
            },
            deleteProductTable: [],
            // 表格复选框批量选中
            productCheckedes: [],
            listLoading: false,
            // 恢复宝贝编辑框显示布尔
            recoverDialogVisible: false,
            dialogLoading: false,
            // 理由
            reasons: [{
                reasonId: '1',
                reasonText: '自己不小心删除的'
            }, {
                reasonId: '2',
                reasonText: '以为可以恢复，随意删除的'
            }, {
                reasonId: '3',
                reasonText: '卖家账号被盗删除的'
            }, {
                reasonId: '4',
                reasonText: '卖家子账户被离职人员恶意删除的'
            }, {
                reasonId: '5',
                reasonText: '旺铺操作导致宝贝删除'
            }, {
                reasonId: '6',
                reasonText: '其他'
            }],
            reasonValue: ''
        },
        methods:{
            getDeleteProducts(isPagination){
                if(!isPagination){
                    this.filter.productNowPage = 1;
                }
                this.listLoading = true;
                axios.post("/seller_logic/getDeleteProducts.htm", this.filter).then( res=>{
                    // 设置总页数
                    this.filter.productAllPage = res.data['data'][0]
                    let response = res.data['data'][1];
                    let val = [];
                    for (let i = 0; i < response.length; i++) {
                        let product = {
                            productId: response[i]['id'],
                            productName: response[i]['productName'],
                            productImage: response[i]['productImages'][0]['imagePath'],
                            price: parseFloat(response[i]['nowPrice']+".00"),
                            count: response[i]['productCount'],
                            deleteTime: response[i]['deleteTime'],
                            createTime: response[i]['createTime'],
                            publishTime: response[i]['publishTime'],
                            completeTime: Totoro.getNextMonthDate(response[i]['deleteTime']),
                        }
                        val.push(product);
                    }
                    this.deleteProductTable = val;
                });
                setTimeout(a=>{
                    this.listLoading = false;
                },300);
            },
            // 重置条件
            resetFilter(){
                this.filter = {
                    productTitle: '',
                    productPublicTime: '',
                    productPageSize: 5,
                    productAllPage: 0,
                    productNowPage: 1,
                    babyType: this.filter.babyType,
                }
            },
            // 改变表格中多个商品选中状态
            changeProductChecked(val){
                this.productCheckedes = val;
            },
            // 改变当前页数
            changeNowPage(val) {
                this.filter.productNowPage = val;
                this.getNewData(true);
            },
            // 单个恢复到仓库
            recover(val){
                this.productCheckedes = [val];
                this.recoverDialogVisible = true;
            },
            // 提交恢复仓库
            submitRecover(){
                if(this.productCheckedes.length<1){
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: '请选择商品！',
                        offset: 400
                    });
                    this.recoverDialogVisible = false;
                    return false;
                }
                if(this.reasonValue == ''){
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: '请选择理由！',
                        offset: 400
                    });
                    this.recoverDialogVisible = false;
                    return false;
                }
                axios.post("/seller_logic/updateProductStatus.htm", {products: this.productCheckedes, isUpdate: true, status: 0, isDelete: true, deleteStatus: 0}).then( res=>{
                    console.log(res);
                })
                axios.post("/seller_logic/recoverProduct.htm", {products: this.productCheckedes, reasonId: this.reasonValue}).then( res=>{
                    console.log(res);
                    this.recoverDialogVisible = false;
                    this.$message({
                        showClose: true,
                        type: 'success',
                        message: '恢复到仓库成功！',
                        offset: 400
                    });
                });
                this.productCheckedes =[];
                this.getDeleteProducts();

            }
        },
        mounted(){
            this.getDeleteProducts();
        }
    });
</script>
</html>
